<template>
    <div class="wrap" v-if="hotwords.length">
        <h2 class="title">大家都在搜</h2>
        <div class="list">
            <van-tag
                class="tag"
                v-for="item in hotwords"
                :key="item.id"
                @click="handleClick(item)"
            >{{ item.keyword }}</van-tag>
        </div>
    </div>
</template>

<script>
import { Tag as VanTag } from 'vant'
export default {
    name: 'SearchHot',
    emits: ['select'],
    components: {
        VanTag
    },
    props: {
        hotwords: {
            type: Array
        }
    },
    setup(props, { emit }) {
        const handleClick = item => {
            emit('select', item.keyword)
        }
        return {
            handleClick
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap{
    display: flex;
    flex-direction: column;
    padding: {
        left: 10px;
        right: 10px;
        top: 10px;
    };
    margin-bottom: 25px;
    .title{
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        color: $color-text-secondary;
    }
    .tag{
        height: 34px;
        line-height: 33px;
        margin-top: 12px;
        margin-right: 10px;
        background-color: $color-white;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 17px;
        color: $color-text-regular;
        box-sizing: border-box;
        font-size: 13px;
    }
}
</style>